<button nz-button [nzType]="'primary'" (click)="showModal()" class="btn-add" ><i class="fas fa-plus"></i>
  新增
</button>
<nz-modal nzMaskClosable="false" [(nzVisible)]="isVisible" nzTitle="新增活动项目" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <nzi-form [formName]="validateForm" #resetFormComponent>
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item>
          <nz-form-label>活动名称<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="activeName">
            <nz-form-explain *ngIf="getInvalid('activeName')">
              {{getInvalid('activeName').message}}
            </nz-form-explain>
          </nz-form-control>
      </nz-form-item>
      <nz-form-item>
          <nz-form-label>活动类别<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <nz-select nzShowSearch [nzPlaceHolder]="'请选择项目类别'" formControlName="activeType">
              <nz-option  [nzLabel]="'自驾游'" [nzValue]='1'>自驾游</nz-option>
              <nz-option  [nzLabel]= "'跟随社团'" [nzValue]='2'>跟随社团</nz-option>
              <nz-option  [nzLabel]="'部门组织'" [nzValue]='3'>部门组织</nz-option>
            </nz-select>
            <nz-form-explain *ngIf="getInvalid('activeType')">
              {{getInvalid('activeType').message}}
            </nz-form-explain>
          </nz-form-control>
      </nz-form-item>
      <nz-form-item>
          <nz-form-label>联系电话<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="telephone">
            <nz-form-explain *ngIf="getInvalid('telephone')">
              {{getInvalid('telephone').message}}
            </nz-form-explain>
          </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>人均单价<span class="required-icon">*</span></nz-form-label>
        <nz-form-control>
          <input nz-input type="number" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" formControlName="perUnitPrice">
          <nz-form-explain *ngIf="getInvalid('perUnitPrice')">
            {{getInvalid('perUnitPrice').message}}
          </nz-form-explain>
        </nz-form-control>
    </nz-form-item>
      <nz-form-item>
          <nz-form-label>活动地点<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="activeAddress">
            <nz-form-explain *ngIf="getInvalid('activeAddress')">
              {{getInvalid('activeAddress').message}}
            </nz-form-explain>
          </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>开/结束时间<span class="required-icon">*</span></nz-form-label>
        <nz-form-control>
          <nz-range-picker nzShowTime formControlName="time" [(ngModel)]="time"></nz-range-picker>
          <nz-form-explain *ngIf="getInvalid('time')">
            {{getInvalid('time').message}}
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item> 
    </form>
  </nzi-form>
</nz-modal>
